<!--  -->
<template>
  <div >
    
    <!-- 内容区开始 -->
    <div class="about main">
      <el-row :gutter="24">
        <!-- 左侧头像部分 -->
      <el-col :span="8" class="col">
        <div class="grid-content bg-purple">
          <div class="headerIcon"><img class="image" src="https://dqxweb.oss-cn-beijing.aliyuncs.com/2022-02-25/1-6.jpg" alt="" ></div>
          <div class="date">用户昵称：<span >{{this.userInfo.username}}</span></div>
          <div class="date">注册日期：<span >{{this.userInfo.createTime  | dateFormat}}</span></div>
          <!-- <div>修改头像: &nbsp; &nbsp;<OssUpload class="ossUpload" v-model="userInfo.header"></OssUpload></div> -->
          <div class="relation">---------------信息绑定---------------</div>
        </div>
        <div class="mobile">
          <ul>
            <li>手机：{{this.userInfo.mobile}} 
              <!-- <span class="button"> <el-button icon="el-icon-phone" type="primary" >更改手机</el-button></span> -->
            </li>
            <li>邮箱：{{this.userInfo.nickname}} 
              <!-- <span class="button"> <el-button icon="el-icon-s-promotion" type="success">更改邮箱</el-button></span> -->
              </li>
          </ul>
        </div>
          <button type="primary" class="passwordButton" @click="editPassword">更改密码</button>
          <button type="primary" class="passwordButton"  @click="editUser">更改个人信息</button>
      </el-col>
      <!-- 右侧个人信息部分 -->
      <el-col :span="16">
        <div class="info">
          <Address></Address>
        </div>
      </el-col>
     </el-row>
    </div>
     <!-- 修改密码弹框 -->
    <el-dialog title="修改密码" :visible.sync ="editPasswordVisible" 
        label-width="100px">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item style="width: 500px" label="新密码" prop="password">
        <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item style="width: 500px" label="确认密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    </el-dialog>
     <!-- 修改个人信息弹框 -->
    <el-dialog title="修改个人信息" :visible.sync ="editUserInfoVisible" 
        label-width="100px">
     <el-form label-width="80px" :model="editUserInfo" ref="editUserInfo"  :rules="editRrules">
      <el-form-item style="width: 500px" label="我的昵称" prop="username">
        <el-input v-model="editUserInfo.username"></el-input>
      </el-form-item>
      <el-form-item style="width: 500px" label="手机号"  prop="mobile">
        <el-input v-model="editUserInfo.mobile"></el-input>
      </el-form-item>
      <el-form-item style="width: 500px" label="邮箱"  prop="nickname">
        <el-input v-model="editUserInfo.nickname"></el-input>
      </el-form-item>
      <el-form-item style="width: 500px" label="头像"  prop="header">
        <OssUpload v-model="editUserInfo.header"></OssUpload>
      </el-form-item>
      <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
    </el-dialog>
  </div>
</template>

<script>
import OssUpload from '../components/OssUpload'
import Address from './mycenter/Address'
import cookie from 'js-cookie'
import { mapGetters } from "vuex";
import { mapActions } from "vuex";
export default {
  name:"About",
  data () {
    var validatePass = (rule, value, callback) => {
      // console.log(value)
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      // 用户名的校验方法
    var validateName = (rule, value, callback) => {
      console.log(value)
      if (!value) {
        return callback(new Error("请输入用户名"));
      }
      // 用户名以字母开头,长度在5-16之间,允许字母数字下划线
      const userNameRule = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
      if (userNameRule.test(value)) {
        this.$refs.editUserInfo.validateField("checkPass");
          return callback();
      } else {
        return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      }
    };
     var validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入手机号"));
      }
      const userNameRule = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/;
      if (userNameRule.test(value)) {
        this.$refs.editUserInfo.validateField("checkPass");
        return callback();
      } else {
        return callback(new Error("请输入正确的手机号"));
      }
    };
      // 自定义邮箱规则
    var checkEmail = (rule, value, callback) => {
      const regEmail = /^\w+@\w+(\.\w+)+$/
      if (regEmail.test(value)) {
        // 合法邮箱
        return callback()
      }
      callback(new Error('请输入合法邮箱'))
    }
    return {
      // 用户头像
      userInfo:{},
      // 修改个人信息数据
      editUserInfo:{
        username:'',
        mobile:'',
        nickname:'',
        header:''
      },
      // 修改密码弹框显示
      editPasswordVisible:false,
      // 修改个人信息弹框显示
      editUserInfoVisible:false,
      // 更改密码信息
      ruleForm: {
          password: '',
          checkPass: '',
        },
        rules: {
          password: [
            {required: true, validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { required: true,validator: validatePass2, trigger: 'blur' }
          ],
        },
        editRrules:{
          username: [ {required: true, validator: validateName, trigger: "blur" }],
          mobile:[{required: true, validator: validatePhone, trigger: "blur" }],
         nickname: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        }
    };
  },
 components:{
   OssUpload ,Address
 },
 created() {
  this.userInfo =this.$store.getters.getUser
  // console.log(this.userInfo)
},
computed: {
    ...mapGetters([ "getUser","getUserInfo", "getNum"])
  },
  methods:{
    ...mapActions(["setUser"]),
    // 显示修改密码弹框
    editPassword(){
      this.editPasswordVisible = true
    },
    // 修改密码
    submitForm(formName) {
        this.$refs[formName].validate( async (valid)  => {
          if (valid) {
            // console.log(this.ruleForm.password)
            const {data:res} = await this.$http.post("xuanmall/wzxusermessage/update",this.ruleForm)
            // console.log(res)
            if(res.msg === "success"){
              this.$message.success("密码修改成功")
            }
            else{
              this.$message.error("密码修改失败")
            }
            this.editPasswordVisible = false
          } else {
            return false;
          }
        });
      },
      resetForm() {
        this.$refs.ruleForm.resetFields()
      },
    // 修改个人信息弹框显示
    editUser(){
      this.editUserInfo={}
      this.editUserInfoVisible = true
      this.editUserInfo = JSON.parse(cookie.get("user"))
    },
    // 修改个人信息
    async  onSubmit(){
      const {data:res} = await this.$http.post("xuanmall/wzxusermessage/update",this.editUserInfo)
        //  console.log(res)
         if(res.msg === "success"){
           this.userInfo.username = this.editUserInfo.username
           this.userInfo.mobile = this.editUserInfo.mobile
           this.userInfo.nickname = this.editUserInfo.nickname
          this.$message.success("保存成功")
         }
         else{
           this.$message.error("保存失败")
         }
         this.editUserInfoVisible = false
    }
  }
}

</script>
<style lang='less' scoped>
@import "../assets/css/index.css";
.about{
  background-color: #f5f5f5;
  .grid-content{
    color: rgb(31, 30, 30);
    text-align: center;
    .headerIcon{
    height: 100px;
    width: 100px;
    margin-left: 50% ;
    border-radius: 50px;
    margin-top: 20px;
    transform: translateX(-50%);
    .image{
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
    }
    .date{
      margin: 20px;
    }
    .ossUpload{
      display: inline-block;
    }
    .relation{
      font-size: 20px;
      margin: 20px;
    }

  }
  .mobile{
    margin-left: 50px;
    padding: 0 10px;
    li{
      margin: 25px 0;
      .el-button{
      float:right;
      padding: 3px 5px;
    }
    }
    
  }
 .passwordButton{
   background-color: rgb(251, 85, 8);
   padding: 5px  20px;
   margin: 20px 45px;
   width: 300px;
   height: 40px;
  border-radius: 20px;
  color: #eee;
  cursor: pointer;
 }
 .col{
   border-right:2px  solid rgb(87, 83, 83) ;
 }
}
</style>